<template>
  <div class="donation-history">
    <!-- 标题 -->
    <div class="header">
      <div class="header__bar"></div>
      <span class="header__text">捐卵历史</span>
    </div>

    <!-- 横线装饰 -->
    <div class="divider">
      <div class="divider__highlight"></div>
    </div>

    <!-- 主体表格 -->
    <div class="content">
      <!-- 仅新增 .table-inner，实现白色背景，零布局干扰 -->
      <div class="table-inner">
        <el-table :data="physicalFeaturesList" class="history__table">
          <el-table-column prop="donationDate" label="捐赠日期" />
          <el-table-column
            prop="donationHospitalCountry"
            label="捐赠医院/国家"
          />
          <el-table-column prop="eggCount" label="取卵数量" />
          <el-table-column prop="pgsPassed" label="通过PGS检测">
            <template #default="{ row }">
              {{ row.pgsPassed === 0 ? "否" : "是" }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
/* 以下脚本区域 100% 保持原样 */
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { features } from "@/api/business/egg";

const userStore = useUserStore();
const userId = ref();
const physicalFeaturesList = ref([]);
const loading = ref(true);

const props = defineProps({
  userId: { type: String, required: true, default: "" },
  donorId: { type: String, required: true, default: "" },
});

function getList() {
  loading.value = true;
  features({ donorId: props.donorId }).then((res) => {
    loading.value = false;
    physicalFeaturesList.value = res.data;
  });
}

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style scoped lang="scss">
/* ====== 以下样式区域 仅追加 .table-inner，其余 100% 保持原样 ====== */
$font-default: "Microsoft YaHei", "微软雅黑", sans-serif;
$color-default: #333;

::v-deep .disabled-input:disabled {
  background-color: red !important;
  color: #999;
  cursor: not-allowed;
  font-family: $font-default;
}

.medical-background {
  width: 100%;
  font-family: $font-default;
  color: $color-default;
}

.header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  font-family: $font-default;
  color: $color-default;
  &__bar {
    width: 6px;
    height: 26px;
    background-color: #2b5cab;
  }
  &__text {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #2b5cab;
    font-family: $font-default;
  }
}

.divider {
  height: 1px;
  background-color: #2b5cab;
  margin-top: 18px;
  position: relative;
  font-family: $font-default;
  color: $color-default;
  &__highlight {
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, #2b5cab, #cedbf0);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.content {
  border: 1px solid #a2c4e8;
  border-radius: 8px;
  margin-top: 23px;
  padding: 20px 20px;
  font-family: $font-default;
  color: $color-default;
}

/* ====== 唯一新增：白色背景，零布局干扰 ====== */
.table-inner {
  background-color: #ffffff; /* 纯白背景 */
  border-radius: 8px; /* 与外层圆角保持一致 */
  /* 无额外 padding / margin，不改变任何占位 */
}

.tables {
  display: flex;
  gap: 40px;
  font-family: $font-default;
  color: $color-default;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: $font-default;
  color: $color-default;
  &__row {
    border-bottom: 1px solid #e5e7eb;
    height: 2em;
  }
  &__question {
    padding: 16px 0;
    text-align: left;
    vertical-align: middle;
    font-family: $font-default;
    color: $color-default;
    &--narrow {
      width: 152px;
    }
  }
  &__cell {
    text-align: center;
    vertical-align: middle;
    font-family: $font-default;
    color: $color-default;
  }
  &__label {
    margin-right: 8px;
    font-size: 14px;
    font-family: $font-default;
    color: $color-default;
    &--yes {
      width: 20px;
      color: #4d4d4d;
    }
    &--no {
      color: #4d4d4d;
      width: 16px;
    }
    &--active {
      color: #2b5cab;
    }
  }
  &__radio {
    width: 20px;
    height: 20px;
    margin-left: 8px;
  }
  &__checkbox {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border: 2px solid #d1d5db;
    &--checked {
      background-color: #2b5cab;
      border-color: #2b5cab;
    }
  }
}

.text {
  font-size: 14px;
  font-family: $font-default;
  color: $color-default;
}
.item {
  margin-bottom: 18px;
  font-family: $font-default;
  color: $color-default;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: $font-default;
  color: $color-default;
}
</style>
